<script lang="ts" setup>
import { useRouter } from 'vue-router'
import type { TableColumns } from '@/types/antd'

defineOptions({
	name: 'product_goods_GoodsList'
})

const router = useRouter()

// 响应式数据
const dataSource = ref([])
const pagination = reactive({
	current: 1,
	pageSize: 10,
	total: 0
})
const queryParams = reactive({
	name: '',
	numbering: '',
	status: ''
})

// 使用函数动态返回表头，实现语言切换时的实时更新
const columns = computed(
	(): TableColumns => [
		{
			title: t('商品列表.商品名'),
			dataIndex: 'name',
			align: 'center' as const,
			width: 300,
			key: 'name'
		},
		{
			title: t('商品列表.商品编号'),
			dataIndex: 'numbering',
			align: 'center' as const,
			key: 'numbering'
		},
		{
			title: t('商品列表.状态'),
			dataIndex: '_status',
			align: 'center' as const,
			key: '_status'
		},
		{
			title: t('商品列表.是否上架'),
			dataIndex: '_is_put_on_sale',
			align: 'center' as const,
			key: '_is_put_on_sale'
		},
		{
			title: t('商品列表.创建时间'),
			dataIndex: '_created_at',
			align: 'center' as const,
			key: '_created_at'
		},
		{
			title: t('商品列表.操作'),
			key: 'action',
			dataIndex: 'action',
			align: 'center' as const
		}
	]
)

// 方法
const addGoods = () => {
	router.push('/product/goods/add')
}

const fetch = () => {
	const formParams: any = {
		page: pagination.current,
		pageSize: pagination.pageSize,
		name: queryParams.name,
		status: queryParams.status
	}
	formParams.permissionName = '商品库-商品管理-商品列表'
	Api.post('/product/goods/list', formParams, true).then((res: any) => {
		dataSource.value = []
		res.items.forEach((item: any) => {
			dataSource.value.push(item)
		})
		pagination.total = res._meta.totalCount
	})
}

const handleTableChange = (paginationData: any, filters: any, sorter: any) => {
	pagination.current = paginationData.current
	pagination.pageSize = paginationData.pageSize
	fetch()
}

// 生命周期
onMounted(() => {
	fetch()
})
</script>

<template>
	<IsGuest>
		<a-form layout="inline">
			<a-form-item>
				<a-button type="default" html-type="submit" @click="addGoods">
					{{ t('商品列表.新建商品') }}
				</a-button>
			</a-form-item>
		</a-form>
		<a-divider />
		<a-table
			:columns="columns"
			:bordered="true"
			:data-source="dataSource"
			:pagination="pagination"
			@change="handleTableChange">
			<template #bodyCell="{ text, record, index, column }">
				<template v-if="column.key === 'action'">
					<div :class="{ 'flex justify-center gap-2': true }">
						<a-button
							v-if="Api.hasPermission('商品库-商品管理-商品详细')"
							@click="
								router.push({
									path: '/product/goods/info',
									query: { id: record.id }
								})
							">
							{{ t('商品列表.详情') }}
						</a-button>
						<a-button
							v-if="Api.hasPermission('商品库-商品管理-复制商品')"
							@click="
								router.push({
									path: '/product/goods/copy',
									query: { copiedById: record.id }
								})
							">
							{{ t('商品列表.复制') }}
						</a-button>
						<a-button
							v-if="Api.hasPermission('商品库-商品管理-修改商品')"
							@click="
								router.push({
									path: '/product/goods/edit',
									query: { id: record.id }
								})
							">
							{{ t('商品列表.编辑') }}
						</a-button>
						<a-button
							v-if="Api.hasPermission('商品库-商品管理-素材编辑')"
							@click="
								router.push({
									path: '/product/goods/materialEdit',
									query: { id: record.id }
								})
							">
							{{ t('商品列表.素材编辑') }}
						</a-button>
					</div>
				</template>
			</template>
		</a-table>
	</IsGuest>
</template>

<style lang="scss" scoped></style>
